/**
 *  学习目标：组件生命周期钩子 卸载时
 *    生命周期：
 *      componentWillUnmount
 *    作用：
 *      执行清理工作（比如：清理定时器等）
 */
import React from 'react'
import PropTypes from 'prop-types'

export default class App extends React.Component {
  state = {
    isShow: true,
  }
  render() {
    return (
      <>
        <h1>倒计时效果</h1>
        <button onClick={() => this.setState({ isShow: !this.state.isShow })}>挂载卸载倒计时组件</button>
        <hr />
        <hr />
        {this.state.isShow ? <CountDown t={5} /> : null}
      </>
    )
  }
}

class CountDown extends React.Component {
  static propTypes = {
    t: PropTypes.number,
  }

  // static defaultProps = {
  //   t: 60,
  // }

  state = {
    time: 0,
  }

  timerId = -1

  handleStart = () => {
    // 如果前面的倒计时还没结束，直接退出
    if (this.state.time !== 0) return
    // 点击初始化倒计时秒数
    this.setState({ time: this.props.t || 60 })
    // console.log('点击发送验证码开启')
    this.timerId = window.setInterval(() => {
      console.log('定时器正在运行中....')
      // 倒计时结束条件
      if (this.state.time === 1) clearInterval(this.timerId)
      this.setState({ time: this.state.time - 1 })
    }, 1000)
  }

  // 组件卸载时，需要手动清理定时器，因为定时器是属于浏览器的
  componentWillUnmount() {
    clearInterval(this.timerId)
  }

  render() {
    return (
      <>
        <button onClick={this.handleStart}>{this.state.time === 0 ? '发送验证码' : this.state.time}</button>
      </>
    )
  }
}
